<template>
	<view>
		<view class="example">

			<uni-forms ref="baseForm">
				<view class="v1">
					<uni-forms-item label="会议标题" required>
						<uni-easyinput v-model="mine.name" placeholder="请输入" />
					</uni-forms-item>
				</view>
				<view class="v1">
					<uni-forms-item label="开始时间">
						<uni-datetime-picker value-format="yyyy-MM-dd hh:mm:ss" type="datetime" return-type="timestamp"
							v-model="mine.starTimes" />
					</uni-forms-item>
				</view>
				<view class="v1">
					<uni-forms-item label="结束时间">
						<uni-datetime-picker value-format="yyyy-MM-dd hh:mm:ss" type="datetime" return-type="timestamp"
							v-model="mine.endTimes" />
					</uni-forms-item>
				</view>
				<view class="v1">
					<uni-forms-item label="会议室" required>
						<uni-easyinput v-model="mine.meetingaddress" placeholder="请输入地点" />
					</uni-forms-item>
				</view>
				<view style="width: 100%;height: 20px;background-color: #f8fbfd;"></view>
				
				<!-- 参与人 -->
				
				<view style="margin: 0px 0px 0px 0px; width: 100%;height: 150px;">
					<view>
						<text style="font-size: 18px;">参与人</text>
					</view>
				
					<!-- 人员 --> <!-- v-if="update"  -->
					<view class="vi1" v-for="(item, index) in lpeo">
						<view class="vi2">
							<view class="flex-row wrapper">
								<u-image class="im" :src="item.picture" width="112rpx" height="112rpx" shape="circle">
									<!-- :src="item.picture" -->
								</u-image>
								
								<view style="float: left;margin: -60px 0px 0px 60px;" @click="delemp(item)">
									<u-icon name="person-delete-fill" color="#2979ff" size="25"></u-icon>
								</view>
								
								<view class="flex-col flex-row wraper-col vi3">
									<view class="text">{{item.name}}</view>
									<!-- {{item.name}} -->
								</view>
							</view>
						</view>
					</view>
					
					
					<view  class="dingwei" style="width: 55px;height: 55px;float: left;margin: 15px 0px 0px 5px;">
						<u-button @click="addemp()" class="butt1" type="success" shape="circle">
							<u-icon name="plus" color="#fff" size="20" border-color="#fff"></u-icon>
						</u-button>
					</view>
				</view>
				<view style="width: 100%;height: 20px;background-color: #f8fbfd;clear:both"></view>
				<view class="v3">
					<uni-forms-item label="会议简介">
						<uni-easyinput type="textarea" v-model="mine.room" placeholder="请输入简介" />
					</uni-forms-item>
					<br>
				</view>
			</uni-forms>

		</view>

		<view class="v2">
			<br>
			<u-button @click="dialogToggle('success')" class="button1" type="success" shape="circle">
				保存
			</u-button>
		</view>

		<view>
			<!-- 确认修改、取消修改 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="通知" content="是否确认修改本次会议？"
					@confirm="dialogConfirm" @close="dialogClose">
					<!-- -->
				</uni-popup-dialog>
			</uni-popup>


			<!-- 修改成功后的提示 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	export default {
		onLoad: function(option) {
			// console.log("接收到的参数" + option.mid);
			this.conference.mid = option.mid
		},
		data() {
			return {
				// 基础表单数据
				mine: {
					name: '',
					age: '',
					introduction: '',
					meetingaddress: '',
					starTimes: 1627529992399,
					endTimes: 1627529992399,
					room: ''
				},
				conference: {},
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				lpeo:null
			}
		},
		created() {
			//初始化编辑会议
			this.getlist()
		},

		methods: {
			//初始化编辑会议
			getlist(){
				// console.log("参数:" + this.conference.mid);
				uni.request({
					url: "http://localhost:8007/conference/mine/getId/" + this.conference.mid,
					method: 'get',
					success: (res) => {
						// console.log("mmmm")
						// console.log(res.data.data.m)
						// console.log("mmmm")
						this.mine = res.data.data.mVo
					}
				})
				
				
				uni.request({
					url: "http://localhost:8007/conference/mine/getIdMP/" + this.conference.mid + "/" + 6 + "/" + 0,
					method: 'get',
					success: (res) => {
						// console.log(res)
						this.lpeo = res.data.data.lpeo
						// console.log(this.lpeo[0].name)
					}
				})
			},

			//修改保存
			compile() {
				uni.request({
					url: "http://localhost:8007/conference/mine/updateMine",
					method: 'post',
					data: this.mine,
					success: (res) => {
						this.messageText = `已成功修改会议！`
						this.$refs.message.open()
					},
					error: (e) => {
						this.messageText = `修改会议失败！`
						this.msgType = 'error'
						this.$refs.message.open()
					}
				})
			},

			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},


			dialogConfirm() {
				//调用修改请求
				this.compile()
				console.log('点击确认')

			},

			dialogClose() {
				console.log('点击取消')
				this.messageText = `您已取消修改！`
				this.msgType = 'info'
				this.$refs.message.open()
			},
			addemp(){
				uni.navigateTo({
					url: "./emolist?mid=" + this.conference.mid,
				})
			},
			delemp(item){
				uni.request({
					url: "http://localhost:8007/conference/mine/removeemp/" + this.conference.mid + "/" + item.eid,
					method: 'DELETE',
					success: (res) => {
						//初始化编辑会议
						this.getlist()
					}
				})
				console.log(item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.v1 {
		margin-top: 10px;
		width: 100%;
		height: 50px;
		// background-color: red;
		border-bottom: 2px solid #f7f7f7;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.button1 {
		width: 330px;
		margin-left: 25px;
		background: #2979ff;
		border-radius: 10px;
		border-color: #2979ff;
	}

	.v2 {
		margin-top: 10px;
		width: 100%;
		height: 70px;
		background-color: #fff;
		border-bottom: 2px solid #f7f7f7;
	}

	.v3 {
		margin-top: 10px;
		width: 100%;
		height: 120px;
		// background-color: red;
		border-bottom: 2px solid #f7f7f7;
	}
	.butt1 {
		padding: 25px 0px 25px 0px;
		font-size: 18px;
		background-color: #2979ff;
		color: #3875f2;
		border-color: #f8f8f8;
		border-radius: 50%;
	}
	.vi1 {
		float: left;
		height: 80px;
		background-color: white;
		margin: 10px 0px 0px 0px;
	}
	
	.vi2 {
		height: 100px;
		margin: 0px 0px 0px 10px;
	}
	.text {
		margin-left: 5px;
		font-size: 16px;
		color: #a6a3a6;
	}
</style>
